<template>
  <div>
    <div style="width: 600px;height: 500px;" id="echart"></div>
  </div>
</template>

<script>
  export default {
    name: "barAndImg",
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.drawEchart()
    },
    methods: {
      drawEchart() {
        const myChart = this.$echarts5.init(document.getElementById('echart'))
        let yList = [2200,2200,2000,2300];
        let yList1 = [2500,2600,2800,2900];
        // let xList = [10, 55, 44, 55, ];
        let xData = ['学前', '小学', '初中', '高中'];
        // let color = ['#CC1CAA', '#8D67FF', '#00FFFF', '#48DE13', '#FFC516', '#DC3E14', '#8E16F8'];

        // let dom = 800;
        let barWidth = 10;
        let option = {
          backgroundColor: "transparent",
          //提示框
          tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          /**区域位置*/
          grid: {
            left: '10%',
            right: '10%',
            top: '10%',
            bottom: '10%',
          },
          //X轴
          xAxis: {
            data: xData,
            type: 'category',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,1)',
                shadowColor: 'rgba(255,255,255,1)',
                shadowOffsetX: '20',
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 25]
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false, //X轴刻度不显示
            },
            axisLabel: {// X间距与字体大小设置
              margin: 30,
              fontSize: 15,
            },
          },
          yAxis: {
            type: 'value',
            name: '',
            scale:true,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#dadada',
              },
            },
            axisLabel: {
              margin: 10,
              // fontSize: fontSize ,
              color: '#333333',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#dadada',
              },
            },
          },
          series: [
            {
              type: 'bar',
              stack: 'stack',
              itemStyle: {
                normal: { //默认柱子消失
                  color: function() {
                    return;
                  }
                }
              },
              label: {
                show: false,// 柱子上不显示数字
              },
              data: yList
            },
            {
              z: 5, //中间部分图片
              type: 'pictorialBar',
              data: yList,
              symbol: 'image://',
              symbolSize: [barWidth,'100%'],
            },
            {
              type: 'bar',
              stack: 'stack',
              itemStyle: {
                normal: { //默认柱子消失
                  color: function() {
                    return;
                  }
                }
              },
              label: {
                show: false,// 柱子上不显示数字
              },
              data: yList1
            },
            {
              z: 5, //中间部分图片
              type: 'pictorialBar',
              data: yList1,
              symbol: 'image://',
              symbolSize: [barWidth,'100%'],
            }
          ],
        };
        myChart.setOption(option, true)
        window.addEventListener('resize', () => { myChart.resize() })
      }

    }
  }
</script>

<style scoped>

</style>
